import { useEffect, useMemo } from 'react';
import { MainRouter } from './router/main';
import { useSelector } from 'react-redux'
import i18n from './language'
import CssBaseline from '@mui/material/CssBaseline';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import * as BLUIThemes from '@brightlayer-ui/react-themes';
import * as locales from '@mui/material/locale'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';


const App = () => {
  const storeSstate = useSelector(state => state)
  useEffect(() => {
    storeSstate.auth.language === 'enUS' ? i18n.changeLanguage('enUS') : i18n.changeLanguage('zhCN')
  }, [storeSstate.auth.language])

  const themeWithLocale = useMemo(
    () => createTheme(storeSstate.auth.theme === 'dark' ? BLUIThemes.blueDark : BLUIThemes.blue, locales[storeSstate.auth.language === 'enUS' ? 'enUS' : 'zhCN']),
    [storeSstate.auth.theme, storeSstate.auth.language]
  )

  const timeCompLang = useMemo(
    () => storeSstate.auth.language === 'enUS' ? 'en' : 'zh-cn',
    [storeSstate.auth.language]
  )

  return (
    <ThemeProvider theme={themeWithLocale}>
      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={timeCompLang}>
        <CssBaseline/>
        <MainRouter/>
      </LocalizationProvider>
    </ThemeProvider>
  );
};

export default App
